function doFirst(){
		var x=document.getElementById("canvas");
		canvas=x.getContext("2d");
	
		var g=canvas.createLinearGradient(20,20,100,100);
		g.addColorStop(0.0,"red");
		g.addColorStop(.5,"yellow");
		g.addColorStop(1,"blue");
		canvas.fillStyle=g;		
		canvas.fillRect(20,20,100,100);
		//------------------------------
		//drawing a shape
		canvas.strokeStyle="blue";
		canvas.beginPath();
		canvas.moveTo(130,50);
		canvas.lineTo(250,50);
		canvas.lineTo(190,120);
		canvas.closePath();
		canvas.stroke();		
		
		//----------------
		
		canvas.font="bold 36px Tahoma";
		canvas.shadowOffsetX=6;	//shifting shadow 6 pixels to right
		canvas.shadowOffsetY=6;	//shifting shadow 6 pixels down
		canvas.shadowColor ="rgba(255,0,0,0.5)";	//r g b and alpha value -> transperancy
		canvas.shadowBlur=6;	// bluriness 
		canvas.textAlign="end";
		canvas.fillText("HTML canavas text",400,200 );
		canvas.strokeText("text 121345",200,20);
				
		canvas.strokeRect(100,100,200,200);
			
		//----------------
			canvas.textAlign="start";
		canvas.fillStyle="black"
		canvas.translate(300,300);
		canvas.fillText("Canvas",0,0);
	
		canvas.rotate((3.14)/2);
		canvas.fillText("Rotate ",0,0);	
				canvas.translate(20,100);				
				
				canvas.scale(2.5,2);
			
				canvas.fillText("scale",0,0);
				
	}
	window.addEventListener("load",doFirst,false);
	